<template>
  <div>
    <!-- <div>
      <img src="../../assets/logo.png" alt="" class="jpgOne" />
    </div>

   <div class="picBox">
     <div class="pic-wrapper">
      <figure class="pic-1"></figure>
      <figure class="pic-2"></figure>
    </div>
   </div>

   <div>
    <section class="color-4">
		<nav class="cl-effect-11">
			<a href="#" data-hover="Desultory">Desultory</a>
			<a href="#" data-hover="Sumptuous">Sumptuous</a>
			<a href="#" data-hover="Scintilla">Scintilla</a>
			<a href="#" data-hover="Propinquity">Propinquity</a>
			<a href="#" data-hover="Harbinger">Harbinger</a>
		</nav>
	</section>
   </div> -->
    <div class="box1" style="width:800px">
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="treeRef"
        highlight-current
        :expand-on-click-node="false"
        :props="defaultProps"
        @check-change="handleCheckChange"
        :default-checked-keys='defaultCheckedKeys'
      >
      </el-tree>
    </div>
    <el-button @click="dian">点击</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultCheckedKeys:[112],
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 11,
              label: "二级 1-1",
              children: [
                {
                  id: 111,
                  label: "三级 1-1-1",
                },
                {
                  id: 112,
                  label: "三级 1-1-2",
                },
              ],
            },
            {
              id: 12,
              label: "二级 1-2",
              children: [
                {
                  id: 121,
                  label: "三级 1-2-1",
                },
                {
                  id: 122,
                  label: "三级 1-2-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 21,
              label: "二级 2-1",
              children: [
                {
                  id: 211,
                  label: "三级 2-1-1",
                },
                {
                  id: 212,
                  label: "三级 2-1-2",
                },
                {
                  id: 213,
                  label: "三级 2-1-3",
                },
                 {
                  id: 214,
                  label: "三级 2-1-4",
                },
                {
                  id: 215,
                  label: "三级 2-1-5",
                },
                {
                  id: 216,
                  label: "三级 2-1-6",
                },
              ],
            },
            {
              id: 22,
              label: "二级 2-2",
              children: [
                {
                  id: 221,
                  label: "三级 2-2-1",
                },
                {
                  id: 222,
                  label: "三级 2-2-2",
                },
              ],
            },
             {
              id: 23,
              label: "二级 2-2",
              children: [
                {
                  id: 221,
                  label: "三级 2-2-1",
                },
                {
                  id: 222,
                  label: "三级 2-2-2",
                },
              ],
             },
             {
              id: 24,
              label: "二级 2-2",
              children: [
                {
                  id: 221,
                  label: "三级 2-2-1",
                },
                {
                  id: 222,
                  label: "三级 2-2-2",
                },
              ],
             },
             {
              id: 25,
              label: "二级 2-2",
              children: [
                {
                  id: 221,
                  label: "三级 2-2-1",
                },
                {
                  id: 222,
                  label: "三级 2-2-2",
                },
              ],
             },
          ],
        },
      ],
    };
  },
  methods: {
    dian(){
      //   const keys = [
      //   ...this.$refs.treeRef.getCheckedKeys(),
      //   ...this.$refs.treeRef.getHalfCheckedKeys()
      // ]
      // let keys = this.$refs.treeRef.getCurrentNode()
      // console.log(keys,'keys')
      let res = this.$refs.treeRef.getCheckedNodes(false,true)
      console.log(res,'节点');
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      //获取所有选中的节点 start
      let res = this.$refs.treeRef.getCheckedNodes(false,true)
      console.log(res,'节点');
      let menuArr = []
      let btnArr = []
      res.forEach((item) => {
        if(item.children){
          menuArr.push({menu_id:item.id})
        }else{
          btnArr.push({menu_btn_id:item.id})
        }
      })
      // // this.dataTree 就是选中的数据
      // this.dataTree = arrDeptId
      console.log(menuArr,'父');
      console.log(btnArr,'子');
    }
  },
};
</script>

<style lang="scss" scoped>
.box1{
    background: #0e83cd;
}
::v-deep .el-tree>.el-tree-node{
    border-bottom: 1px dashed #0e83cd;
    margin-bottom: 15px;
    padding-bottom: 15px;
}
::v-deep .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content{
  width: 800px;
}
::v-deep .el-tree-node__children .el-tree-node {
  // display: flex !important;
  // flex-wrap: wrap !important;
  float: left;
  // width: 400px;
}
// ::v-deep .el-tree-node__children>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content{
//   float: none;
// }
::v-deep .el-tree-node__expand-icon {
  display: none !important;
}

.jpgOne {
  transition: opacity 500ms ease 0s;
}
.picBox {
  width: 300px;
  height: 300px;
}
.pic-wrapper {
  position: absolute;
  width: 300px;
  height: 300px;
  overflow: hidden;
}
figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  animation: slideShow 12s linear infinite 0s;
  -o-animation: slideShow 12s linear infinite 0s;
  -moz-animation: slideShow 12s linear infinite 0s;
  -webkit-animation: slideShow 12s linear infinite 0s;
  // animation: slideShow 24s linear infinite 0s;
  // -o-animation: slideShow 24s linear infinite 0s;
  // -moz-animation: slideShow 24s linear infinite 0s;
  // -webkit-animation: slideShow 24s linear infinite 0s;
}
.pic-1 {
  opacity: 1;
  background: url(../../assets/img-3.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(../../assets/img-4.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
// .pic-3 {
//     animation-delay: 12s;
//     -o-animation-delay: 12s;
//     -moz--animation-delay: 12s;
//     -webkit-animation-delay: 12s;
//     background: url(/uploads/150401/2.jpg) no-repeat center center;
//     -webkit-background-size: cover;
//     -moz-background-size: cover;
//     -o-background-size: cover;
//     background-size: cover;
// }
// .pic-4 {
//     animation-delay: 18s;
//     -o-animation-delay: 18s;
//     -moz--animation-delay: 18s;
//     -webkit-animation-delay: 18s;
//     background: url(/uploads/150401/3.jpg) no-repeat center center;
//     -webkit-background-size: cover;
//     -moz-background-size: cover;
//     -o-background-size: cover;
//     background-size: cover;
//     /* keyframes*/
// }
@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }
  // 5% {
  //     opacity: 1;
  // }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transformm: scale(1);
  }
}
@-o-keyframes slideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
  }
  // 5% {
  //     opacity: 1;
  // }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -o-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -o-transformm: scale(1);
  }
}
@-moz-keyframes slideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
  }
  // 5% {
  //     opacity: 1;
  // }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -moz-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -moz-transformm: scale(1);
  }
}
@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  // 5% {
  //     opacity: 1;
  // }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -moz-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}
// @-webkit-keyframes slideShow {
//     0% {
//         opacity: 0;
//         -webkit-transform: scale(1);
//     }
//     5% {
//         opacity: 1;
//     }
//     25% {
//         opacity: 1;
//     }
//     30% {
//         opacity: 0;
//         -webkit-transform: scale(1.1);
//     }
//     100% {
//         opacity: 0;
//         -webkit-transformm: scale(1);
//     }
// }

nav a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 1.35em;
}
.color-4 {
  background: #0e83cd;
}
.cl-effect-11 a {
  padding: 10px 0;
  border-top: 2px solid #0972b4;
  color: #0972b4;
  text-shadow: none;
}

.cl-effect-11 a::before {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 10px 0;
  max-width: 0;
  border-bottom: 2px solid #fff;
  color: #fff;
  content: attr(data-hover);
  -webkit-transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  transition: max-width 0.5s;
}

.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
  max-width: 100%;
}
</style>
